<template>
  <div class="content">
    <!-- 人物卡片 -->
    <div class="people">
      <img v-if="sex" src="../../assets/icons/woman.png">
      <img v-if="!sex" src="../../assets/icons/man.png">

      <div class="right">
        <h4>{{ formatDate }} {{ weekDay }}</h4>
        <h2>{{ season }}</h2>
        <br>
      </div>
      <hr>
      <table>
        <tr>
          <td class="title">姓名：</td>
          <td>xxxxxxxxxx</td>
        </tr>
        <tr>
          <td class="title">性别：</td>
          <td>xxxxxx</td>
        </tr>
        <tr>
          <td class="title">手机号：</td>
          <td>xxxxxxxx</td>
        </tr>
        <tr>
          <td class="title">邮箱：</td>
          <td>xxxxxxxx</td>
        </tr>
      </table>
    </div>
    <!-- 日历 -->
    <div class="date">
      <el-calendar v-model="value">
      </el-calendar>
    </div>
    <!-- 考勤 -->
    <div class="card">
      <div class="card-item card-item1">
        <table>
          <tr>
            <td rowspan="2" class="icon"><img src="../../assets/icons/员工.png"></td>
            <td class="name">员工总数</td>
          </tr>
          <tr>
            <td class="num">{{ total }}</td>
          </tr>
        </table>
      </div>
      <div class="card-item card-item2">
        <table>
          <tr>
            <td rowspan="2" class="icon"><img src="../../assets/icons/女生.png"></td>
            <td class="name">女生总数</td>
          </tr>
          <tr>
            <td class="num">{{ womenTotal }}</td>
          </tr>
        </table>
      </div>
      <div class="card-item card-item3">
        <table>
          <tr>
            <td rowspan="2" class="icon"><img src="../../assets/icons/男生.png"></td>
            <td class="name">男生总数</td>
          </tr>
          <tr>
            <td class="num">{{ manTotal }}</td>
          </tr>
        </table>
      </div>
      <div class="card-item card-item4">
        <table>
          <tr>
            <td rowspan="2" class="icon"><img src="../../assets/icons/个人出勤.png"></td>
            <td class="name">今日出勤</td>
          </tr>
          <tr>
            <td class="num">{{ work }}</td>
          </tr>
        </table>
      </div>
      <div class="card-item card-item5">
        <table>
          <tr>
            <td rowspan="2" class="icon"><img src="../../assets/icons/请假.png"></td>
            <td class="name">今日请假</td>
          </tr>
          <tr>
            <td class="num">{{ leave }}</td>
          </tr>
        </table>
      </div>
      <div class="card-item card-item6">
        <table>
          <tr>
            <td rowspan="2" class="icon"><img src="../../assets/icons/未出勤.png"></td>
            <td class="name">今日缺勤</td>
          </tr>
          <tr>
            <td class="num">{{ outwork }}</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 培训 -->
    <div class="professional" id="xian"></div>
    <!-- 招聘 -->
    <div class="hire" id="tiao"> </div>
    <!-- 员工 -->
    <div class="employee" id="bing"></div>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useHomePageStore } from '../../stores/modules/homePage'   // 导入
import * as echarts from 'echarts';

// 获取数据
const homePageStore = useHomePageStore()   // 调用store实例

// 用户信息
const sex = ref(true)
const formatDate = ref('')
const weekDay = ref('')
const season = ref('')
// 获取当前时间
onMounted(() => {
  const now = new Date()

  // 获取年、月、日，并格式化为"YYYY-MM-DD"格式
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0') // 月份是从0开始的，所以需要+1
  const day = now.getDate().toString().padStart(2, '0')

  // 将年月日拼接成完整的日期字符串
  formatDate.value = `${year}-${month}-${day}`

  // 获取星期几的名称
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  weekDay.value = days[now.getDay()]

  // 根据当前月份获取季节
  const seasons = {
    '01': '冬',
    '02': '冬',
    '03': '春',
    '04': '春',
    '05': '春',
    '06': '夏',
    '07': '夏',
    '08': '夏',
    '09': '秋',
    '10': '秋',
    '11': '秋',
    '12': '冬'
  }
  season.value = seasons[month]
})
// 日历
const value = ref(new Date())

//  基础统计数据 + 考勤
const total = ref(0)  // 总人数
const manTotal = ref(0)  // 男生
const womenTotal = ref(0) // 女生
const work = ref(0)  // 出勤
const outwork = ref(0)   //缺勤
const leave = ref(0)  // 请假
onMounted(async () => {
  await homePageStore.fetchPeopleTotals()
  await homePageStore.fetchCheckInfos()

  total.value = homePageStore.peopleTotals.total
  manTotal.value = homePageStore.peopleTotals.badCount
  womenTotal.value = homePageStore.peopleTotals.goodCount
  if (homePageStore.checks.wagesCount) {
    work.value = homePageStore.checks.wagesCount.attend
    outwork.value = homePageStore.checks.wagesCount.absent
    leave.value = homePageStore.checks.wagesCount.leave
  }
})

// ECharts 图表实例
let myChart1: any = null;
let myChart2: any = null;
let myChart3: any = null;

// 折线图
onMounted(async () => {
  await homePageStore.fetchDevelopInfos()
  // 基于准备好的dom，初始化echarts实例
  myChart1 = echarts.init(document.getElementById('xian'));
  // 初始化 legend 数据和 series 数据
  var legendData = [];
  var seriesData = [];
  // 遍历 wagesCount 数组，为每个部门创建一个系列
  homePageStore.developInfos.wagesCount.forEach((department) => {
    // 添加 legend 数据
    legendData.push(department.department);

    // 创建 series 数据
    var departmentSeries = {
      name: department.department,
      type: 'line',
      data: [
        department.low,       // 不合格
        department.so,        // 合格
        department.normal,     // 良好
        department.good,       // 优秀
        department.great       // 非常好
      ],
      label: {
        show: true,
        position: 'top',
        formatter: function (params) {
          // 将数值四舍五入到最接近的整数
          return Math.round(params.value);
        }
      }
    };
    seriesData.push(departmentSeries);
  });
  // console.log(pieData)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '各部门培训成果统计'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: legendData
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      right: '5%',
      feature: {
        saveAsImage: {},
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['不合格', '合格', '良好', '优秀', '完美']
    },
    yAxis: {
      type: 'value'
    },
    series: seriesData
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart1.setOption(option);
})

// 柱状图
onMounted(async () => {
  await homePageStore.fetchHireInfos()
  // 基于准备好的dom，初始化echarts实例
  myChart2 = echarts.init(document.getElementById('tiao'));

  // 提取部门名称和 esum 值
  var pieData = [
    homePageStore.hireInfos.wagesCount.sum,
    homePageStore.hireInfos.wagesCount.fsum,
    homePageStore.hireInfos.wagesCount.isum,
    homePageStore.hireInfos.wagesCount.esum
  ];

  console.log(pieData)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '当前招聘进度',
      top: 10,
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['招聘信息数', '简历数', '待面试', '待录用']
    },
    yAxis: {
      type: 'value',
      height: 400,
      name: '人数'
    },
    toolbox: {
      right: '5%',
      feature: {
        saveAsImage: {},
        restore: { show: true },
      }
    },
    series: [{
      data: pieData,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.8)'
      },
      barWidth: '60%',
      barGap: '10%',
      // 配置数据标签
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置，这里设置为顶部
        formatter: '{c}', // 标签内容格式化，这里显示数据值
        textStyle: {
          color: '#000' // 标签文字颜色
        }
      }
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option);
})

// 饼状图
onMounted(async () => {
  await homePageStore.fetchDevelopInfos()
  // 基于准备好的dom，初始化echarts实例
  myChart3 = echarts.init(document.getElementById('bing'));
  // homePageStore.developInfos.wagesCount
  // 提取部门名称和 esum 值
  var pieData = homePageStore.developInfos.wagesCount.map(function (item) {
    return {
      value: item.esum,
      name: item.department
    };
  });
  console.log(pieData)
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '员工部门分布表',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data: pieData.map(function (item) { return item.name; })
    },
    toolbox: {
      right: '5%',
      feature: {
        dataView: { show: true, readOnly: false },
        saveAsImage: {},
        restore: { show: true },
      }
    },
    series: [
      {
        name: '员工分布',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: pieData
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart3.setOption(option);
})


// onUnmounted(() => {
//   // 销毁 ECharts 实例
//   if (myChart1) {
//     myChart1.dispose();
//     myChart1 = null; // 清空引用，确保实例被垃圾回收机制回收
//   }
//   if (myChart2) {
//     myChart1.dispose();
//     myChart1 = null; // 清空引用，确保实例被垃圾回收机制回收
//   }
//   if (myChart3) {
//     myChart1.dispose();
//     myChart1 = null; // 清空引用，确保实例被垃圾回收机制回收
//   }
// });


</script>


<style src="@/assets/main.scss"></style>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 30% 35% 35%;
  grid-template-rows: repeat(8, 1fr);
  gap: 9px;
}

.people {
  background-color: #ffffff;
  grid-column: 1 / 2;
  grid-row: 1 / 5;
  /* display: flex; */
}

.people img {
  margin-top: 25px;
  margin-left: 25px;
}

.people hr {
  width: 90%;
  background-color: rgb(216, 216, 216);
}

.people .right {
  display: inline-block;
  margin-left: 20px;
}

.people table {
  width: 100%;
  margin-left: 20px;
}

.people table .title {
  width: 20%;
  color: rgba(0, 0, 0, 0.4);
}

.date {
  grid-column: 1 / 2;
  grid-row: 5 / 9;
}

.card {
  background-color: transparent;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.card .card-item {
  display: inline-block;
  width: 31%;
  height: 50%;
  background-color: white;
}

.card .card-item .icon {
  width: 70px;
  height: 64px;
  padding: 0;
  margin: 0;
}

.card .card-item1 .icon,
.card .card-item4 .icon {
  background-color: rgb(141, 141, 217);
}

.card .card-item2 .icon,
.card .card-item5 .icon {
  background-color: rgb(138, 189, 138);
}

.card .card-item3 .icon,
.card .card-item6 .icon {
  background-color: rgb(240, 197, 204);
}

.card .card-item2,
.card .card-item5,
.card .card-item3,
.card .card-item6 {
  margin-left: 30px;
}

.card .card-item .icon img {
  margin-left: 20px;
}

.card .card-item .name {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  padding-left: 10px;
}

.card .card-item .num {
  font-size: 25px;
  font-weight: 600;
  padding-left: 10px;
}

.professional {
  background-color: #ffffff;
  grid-column: 2 / 4;
  grid-row: 3 / 6;
  margin-top: 10px;
}

.hire {
  background-color: #ffffff;
  grid-column: 2 / 3;
  grid-row: 6 / 9;
  padding: 0;
  margin-top: 10px;
}

.employee {
  background-color: #ffffff;
  grid-column: 3 / 4;
  grid-row: 6 / 9;
  padding: 0;
  margin-top: 10px;
}

</style>
